import axios from 'axios';
import { Input, Cell } from 'react-vant'
import '@nutui/nutui-react/dist/style.css'
import { NavBar, Toast } from '@nutui/nutui-react'
import { Button, Tag } from '@nutui/nutui-react'
import { Popup, Space } from 'antd-mobile'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import React, { useEffect, useState } from 'react'
import { DownOutline } from 'antd-mobile-icons'

import './map.scss'
import { useNavigate } from 'react-router-dom';
var Bmap = window.BMap
export default function Map() {
  const [suggestions, setSuggestions] = useState([]);
  let ac = null;
  const nav = useNavigate()
  console.log(window);
  const marginStyle = { margin: 8 }
  useEffect(() => {
    let point = {
      longitude: 114.46209234622192,
      latitude: 37.10528847275055,
      label: '邢台帝景城'
    }
    getall(point)
    ac = new window.BMap.Autocomplete({
      input: "searchBox",
      location: new window.BMap.Map("map")
    });

    ac.addEventListener("onconfirm", (e) => {
      console.log(e.item);
      setinp(e.item.value.
        business
      )
      document.getElementById("searchBox").value = e.item.value.business;
      const item = e.item;
      const myValue = item.value;
      const local = new window.BMap.LocalSearch(new window.BMap.Map("map"), {
        onSearchComplete: (results) => {
          if (local.getStatus() === window.BMAP_STATUS_SUCCESS) {
            const poi = results.getPoi(0);
            console.log(poi.title, poi.point);
          }
        }
      });
      local.search(myValue);
    });

    return () => {

    };
  }, [])
  const handleSelectSuggestion = (value) => {
    console.log(1);
    document.getElementById("searchBox").value = value;
    console.log(value);

    setSuggestions([]);
  };

  const [inp, setinp] = useState('')
  const getall = async (e, en) => {
    console.log(en);
    let lpl = await axios.get('')
    console.log(lpl);
    let point = new Bmap.Point(e.longitude, e.latitude, '帝景城')
    var mmp = new Bmap.Map('bmap')
    mmp.centerAndZoom(point, 12)
    mmp.enableScrollWheelZoom(true);
    //左侧平面缩放
    mmp.addControl(new Bmap.NavigationControl());
    //右侧缩略图
    mmp.addControl(new Bmap.OverviewMapControl());
    //左下角显示缩放比例
    mmp.addControl(new Bmap.ScaleControl());
    //地图类型
    mmp.addControl(new Bmap.MapTypeControl());
    //添加标注


    //更改图片
    var myicon = new Bmap.Icon("./2.png", new Bmap.Size(30, 25))
    let marker = new Bmap.Marker(point, { icon: myicon })
    mmp.addOverlay(marker)

    //添加窗口信息
    var lp = {
      width: 250,
      height: 100,
      title: inp
    }
    //监听事件
    marker.addEventListener("click", function (e) {
      var infowindow = new Bmap.InfoWindow('数据', lp)
      mmp.openInfoWindow(infowindow, point)
      console.log(1);
    })



    //创建地图解析
    var jiexi = new Bmap.Geocoder()
    jiexi.getPoint(inp, function (point) {
      console.log(point);
      mmp.centerAndZoom(point, 10);
      var myicon = new Bmap.Icon("./2.png", new Bmap.Size(30, 25))
      var lk = new Bmap.Marker(point)
      mmp.addOverlay(lk);
      lk.addEventListener("click", function (e) {
        var infowindow = new Bmap.InfoWindow('数据', lp)
        mmp.openInfoWindow(infowindow, point)
      })
    }, inp)

    //首次加载获取当前位置地址
    var geolocation = new Bmap.Geolocation();
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function (r) {

      var Mk = new Bmap.Marker(r.point);
      mmp.addOverlay(Mk);
      mmp.panTo(r.point);
      // 根据坐标经纬度得到地址描述 
      var myGeo = new Bmap.Geocoder();
      myGeo.getLocation(new Bmap.Point(r.point.lng, r.point.lat), function (result) {
        if (result) {
          setaddress(result.address)
          alert(result.address);
        }
      });

    });

    mmp.addEventListener('click', function (e) {
      console.log(e);
      var mk = new Bmap.Marker(e.point.lng, e.point.lat);
      console.log(mk);
      mmp.addOverlay(mk);
      var myGeo = new Bmap.Geocoder();
      myGeo.getLocation(new Bmap.Point(e.point.lng, e.point.lat), function (result) {
        if (result) {
          setaddress(result.address)
          alert(result.address);

        }
      });
      // alert('点击的经纬度：' + e.point.lng + ', ' + e.point.lat);
      // var mercator = mmp.lnglatToMercator(e.point.lng, e.point.lat);
      // alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);

    });


  }
  const [address, setaddress] = useState()
  const dianji = async () => {
    var mmp = new Bmap.Map('bmap')
    // let point = new Bmap.Point( 114.46209234622192,37.10528847275055,'帝景城')
    // mmp.centerAndZoom(point,12)
    mmp.enableScrollWheelZoom(true);
    //左侧平面缩放
    mmp.addControl(new Bmap.NavigationControl());
    //右侧缩略图
    mmp.addControl(new Bmap.OverviewMapControl());
    //左下角显示缩放比例
    mmp.addControl(new Bmap.ScaleControl());
    //地图类型
    mmp.addControl(new Bmap.MapTypeControl());
    // var myicon = new Bmap.Icon("./2.png", new Bmap.Size(30, 25))
    // let marker = new Bmap.Marker(point,{icon:myicon})
    // mmp.addOverlay(marker)
    var lp = {
      width: 250,
      height: 100,
      title: inp
    }
    //监听事件
    //   marker.addEventListener("click", function(e){
    //     var infowindow = new Bmap.InfoWindow('数据',lp)
    //     mmp.openInfoWindow(infowindow,point)
    //     console.log(1);
    //   })



    //搜索实现正地图解析/并给定坐标
    var jiexi = new Bmap.Geocoder()
    jiexi.getPoint(inp, function (point) {
      console.log(point);
      mmp.centerAndZoom(point, 10);
      var myicon = new Bmap.Icon("./2.png", new Bmap.Size(30, 25))
      var LK = new Bmap.Marker(point)
      mmp.addOverlay(LK);
      LK.addEventListener("click", function (e) {
        var infowindow = new Bmap.InfoWindow('数据', lp)
        mmp.openInfoWindow(infowindow, point)
      })
    }, inp)


  }
  const [visible5, setVisible5] = useState(false)
  const xs_xs = () => {
    setVisible5(false)
  }
  const zs_zs = () => {
    setVisible5(true)
  }
  return (
    <div style={{ 'height': '100%', 'position': 'relative' }}>
      <div>
        <NavBar
          back={<ArrowLeft />}
          right={
            <>
              <span onClick={(e) => Toast.show('编辑')}>编辑</span>
              <More onClick={(e) => Toast.show('icon')} />
            </>
          }
          onBackClick={(e) => nav(-1)}
        >
          <span>编辑收货地址</span>

        </NavBar>
      </div>

      <div className='sou'>
        {/* <Cell>
          <Input
        
           
            prefix="💁"
            suffix={<Button size="small" type="primary" onClick={(en) => dianji(en)}>搜索</Button>}
            placeholder="请输入您的收货地址"
            id="searchBox"
          />
        </Cell> */}


        💁
        <input type="text" id="searchBox" placeholder="请输入关键字" onChange={(e) => setinp(e)} style={{ border: 'none' }} />
        <Button size="small" type="primary" onClick={(en) => dianji(en)}>搜索</Button>
        <ul>
          {suggestions.map((suggestion, index) => (
            <li key={index} onClick={() => handleSelectSuggestion(suggestion)}>
              {suggestion}
            </li>
          ))}
        </ul>
      </div>

      <div id='bmap' style={{ 'height': '400px' }}>Map

      </div>
      <div className='addre'>
        <h2>
          {address}    <Button type="warning" fill="outline" style={marginStyle} className='anniu'>
            确认地址
          </Button>
        </h2>

      </div>
      <Button block type="primary" style={{ marginTop: '90px', width: '350px', marginLeft: '14px', height: '40px' }} onClick={() => zs_zs()}>
        详细地址信息
      </Button>
      <div className='address'>
        <Popup
          visible={visible5}
          onMaskClick={() => {
            setVisible5(false)
          }}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '40vh',
          }}
        >
          <DownOutline style={{ marginLeft: '47%' }} onClick={() => xs_xs()} />

          <div style={{ display: 'flex' }}>
            <div style={{ width: '70px' }}>
              <p style={{ fontSize: '15px', fontWeight: 'bold', marginTop: '7px' }}>门牌号:</p>
            </div>

            <Input

              className="nut-input-text"
              placeholder="请输入文本"
              type="text"
              onChange={(val) => {
                console.log('change value:', val)
              }}
            />
          </div>
          <hr style={{ textAlign: 'center', width: '300px', marginLeft: '50px', marginTop: '10px', }} />


          <hr style={{ textAlign: 'center', width: '300px', marginLeft: '50px', marginTop: '10px', }} />



        </Popup>
      </div >

    </div>

  )
}
